import { Button, Card, Form, Input, Select, Table } from "antd";
import { useEffect, useRef, useState } from "react";
import { Switch, useHistory, useParams } from "react-router-dom/cjs/react-router-dom.min";
import FetchHelper from "../../../../../../utils/helper/fetch-helper";
import JzzyHandle from "../../../../../../utils/apis/JzzyHandle";
import _ from 'lodash';
import { useForm } from "antd/es/form/Form";

export default function JzzyEdit() {
    const  rootRef = useRef();
    const [dynamicForms, setDynamicForms] = useState();
    const [idDatas,setIdDatas] = useState();
    const [loading, setLoading] = useState();
    const [form] = Form.useForm();
    const [xqJson, setXqJson] = useState({})
    const [jzzyXqDatas,setJzzyXqDatas]=useState(); 
    const history = useHistory();
    const [params, setParams] = useState({
        pageSize: 10,
        pageNum: 1,
        cztSmall: '学校'
      })
    //获取点击编辑行的id
    const id = useParams()?.id;
    useEffect(() => {
        JzzyHandle.jzzyEditDynamicApi().then(datas => {
            setDynamicForms(datas)
        })
    },[])
 useEffect(()=>{
        JzzyHandle.jzzyXqEditDynamicApi().then(datas=>{
            setJzzyXqDatas(datas)
            // console.log(datas)
        })
    },[])

    useEffect(() => {
        if(params){
        JzzyHandle.list(id).then(resp => {
            setIdDatas(resp.data)
            let jzzyXqEditData=JSON.parse(resp.data.xq)
            form.setFieldsValue({
                ...resp.data,
                xqJson:{
                    ...jzzyXqEditData
                }
            })
        })}
    },[form,params,id])
   
    // const currentDate = new Date().toISOString().split('T')[0];
    
    //表格
 
   
  const quxiaoHandle = () => {
    history.push(`/manager/jzzy`)
  }
    //保存
    
    const onFinish = (values) => {
        for(const key in idDatas){
            if(values.hasOwnProperty(key)){
                idDatas[key]=values[key]
            }
        }
        console.log(values.xqJson)
        idDatas.xq=JSON.stringify(values.xqJson)
        FetchHelper.putJson(`/admin-api/ybyj/jzzy`,idDatas).then(resp => { alert("修改成功") }).catch(err => { alert("修改失败") })
    }
    return <div className="layout-h h100" style={{
        overflow:"scroll"
    }}>
        <Card className="h100 fill" style={{
            height:"1500px"
        }}>
            <Form method="post" onFinish={onFinish} form={form}>
                <header style={{
                    fontSize:20,
                    fontWeight:"bold"
                }}>减灾资源</header><hr/>
                <div className="InputForm" style={{
                    flex:"flex",
                    flexWrap:"wrap"
                }}>
                    {idDatas !== undefined && dynamicForms !== undefined && dynamicForms.map((formItem) => {
                        let node;
                        switch (formItem.type) {
                            case 'select':
                                node = <Select></Select>;
                                break;
                            case 'input':
                            default:
                                node = <Input style={{
                                    width:'90%'
                                }}
                                onChange={(e) => {

                                }} />
                        }
                        // const initialValue = idDatas[formItem.name] !== undefined ? idDatas[formItem.name] :undefined
                        return <div style={{
                            flexBasis:"33%",
                            marginBottom:"10px"
                        }}><Form.Item 
                        label={formItem.alias}
                        name={formItem.name}
                        // initialValue={initialValue}
                        // rules={[{
                        //     required:true,
                        // }]}
                        >
                            {node}
                        </Form.Item></div>
                    })}
                </div>
                <div>
               
                <div>
                    <header style={{
                        fontSize:"20px",
                        fontWeight:"bold"
                    }}>减灾资源详情编辑：</header><hr></hr>
                </div>

                <div style={{
                    display:"flex",
                    flexWrap:"wrap"
            }}>
                {idDatas !== undefined && jzzyXqDatas !== undefined && jzzyXqDatas.map((formItem) => {
            let node;
            switch (formItem.type) {
              case 'select':
                node = <Select></Select>;
                break;
              case 'input':
              default:
                node = <Input style={{
                  width: "90%"
                }}
                  onChange={(e) => {

                  }}

                />
            }
            return <div style={{
              flexBasis: "33%",
              marginBottom: "10px"
            }}><Form.Item
              label={formItem.alias}
              name={['xqJson',formItem.name]}

            //   rules={[
            //     {
            //       required: true,

            //     }
            //   ]}

            >
                {node}
              </Form.Item></div>

          })}
                </div>
                <div>
                    <Button className="btn1" type="primary" htmlType="submit">保存</Button>
                    <Button onClick={quxiaoHandle} className="btn2">返回</Button></div>
                </div>
            </Form>
        </Card>
    </div>

}